import Vue from 'vue'
import VueRouter from 'vue-router'
// 💥注意点：通过import xxx from xxx的方式加载组件，无论组件有没有被用到，都会被加载进来
// import Recommend from '../views/Recommend'
// import Singer from '../views/Singer'
// import Rank from '../views/Rank'
// import Search from '../views/Search'

// 实现Vue组件的按需加载 优点：比import xxx from xxx的性能要好，只要我用到这个组件才去加载
// 404 的组件
// const NotFound = (resolve) => {
//   import('').then((module) => {
//     resolve(module)
//   })
// }
const Recommend = (resolve) => {
  // 通过import异步加载组件
  import('../views/Recommend').then((module) => {
    resolve(module)
  })
}

const Detail = (resolve) => {
  import('../views/Detail').then((module) => {
    resolve(module)
  })
}

const Singer = (resolve) => {
  import('../views/Singer').then((module) => {
    resolve(module)
  })
}

const Rank = (resolve) => {
  import('../views/Rank').then((module) => {
    resolve(module)
  })
}

const Search = (resolve) => {
  import('../views/Search').then((module) => {
    resolve(module)
  })
}
const Accout = (resolve) => {
  import('../views/Accout').then((module) => {
    resolve(module)
  })
}

Vue.use(VueRouter)


const routes = [
  //重定向路由
  { path: '/', redirect: '/recommend' },
  //路由的去向
  {
    path: '/recommend',
    component: Recommend,
    children: [
      {
        path: 'detail/:id/:type',
        component: Detail
      }
    ]
  },
  {
    path: '/singer',
    component: Singer,
    children: [
      {
        path: 'detail/:id/:type',
        component: Detail
      }
    ]
  },
  {
    path: '/rank',
    component: Rank,
    children: [
      {
        path: 'detail/:id/:type',
        component: Detail
      }
    ]
  },
  { path: '/search', component: Search },
  // 404在最后(规则是从前往后逐个比较path)
  // { path: '*', component: NotFound }
  { path: '/accout', component: Accout },
]

const router = new VueRouter({
  // history模式打包上线后是不能进行刷新的
  // mode: 'history',
  // 第一种:使用hash模式 解决
  mode: 'hash',
  // 第二种:修改服务端的配置
  base: process.env.BASE_URL,
  routes
})

export default router
